var count = 1
var container = document.getElementById('container')
function getUserAction(e) {
    container.innerHTml = count++
    console.log(count)
    console.log(this)
    console.log(e) //JavaScript 在事件处理函数中会提供事件对象 event如果我们不使用 debouce 函数，这里会打印 MouseEvent 对象
}
var timeout1;
container.onmousemove = debounce(getUserAction, 500)


// 第一版debounce.js
// this指向不正确
// function debounce (fn,time) {
//     var timeout;
//     return function () {
//         clearTimeout(timeout)
//         timeout = setTimeout(fn,time)
//     }
// }
// 第二版,使this指向正确
// function debounce(fn, time) {
//     var timeout;
//     return function () {
//         var _self = this
//         clearTimeout(timeout)
//         timeout = setTimeout(function () {
//             fn.apply(_self)
//         }, time)
//     }
// }

// 第三版，使event对象正常
// function debounce(fn,time) {
//     var timeout
//     return function() {
//         let _self = this
//         let args = arguments
//         clearTimeout(timeout)
//         timeout = setTimeout( function() {
//             fn.apply(_self,args)
//         },time)
//     }
// }

// 原理：你尽管触发事件，我一定会在事件触发的n秒之后再执行，如果你在一个事件触发的n秒内，再次触发该事件，那我以最后一次触发该事件的n秒之后才执行。

// function debounce (time,fn) {
//     let timer 
//     return function () {
//         if(timer) {
//             clearTimeout(timer)
//         }
//         let _self = this
//         let ages = arguments
//         timer =  setTimeout(function() {
//             fn.apply(_self,ages)
//         },time)
//     }
// }


// 节流：触发事件后n执行，在n秒之内无论你触发多少次，我都会只执行一次。

// function throttle (time,fn) {
//     var time 
// }

